<template>
  <el-card class="spu-table">
    <el-button type="primary" :disabled="!categoryStore.category3Id" @click="showSaveSpu">添加SPU</el-button>
    <!-- v-loading="loading" -->
    <el-table :data="SpuList" border>
      <el-table-column type="index" label="序号" width="60" align="center" />
      <el-table-column prop="spuName" label="SPU名称" />
      <el-table-column prop="description" label="Spu描述" />

      <el-table-column prop="address" label="操作" width="250">
        <template v-slot="{ row ,$index}">
          <el-tooltip content="添加SKU" placement="top" effect="light">
            <el-button type="primary" :icon="Plus" size="small" @click="UpdateSpu(row)" />
          </el-tooltip>
          <el-tooltip content="修改SKU" placement="top" effect="light">
            <el-button type="primary" :icon="Edit" size="small"  @click="setSpuList(row)" />
          </el-tooltip>
          <el-tooltip content="查看SKU列表" placement="top" effect="light">
            <el-button type="info" :icon="InfoFilled" size="small" />
          </el-tooltip>
          <el-tooltip content="删除SPU" placement="top" effect="light">
            <el-button type="danger" :icon="Delete" size="small" @click="delSpu(row) "/>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-model:currentPage="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[3, 6, 9]"
      :total="total"
      layout=" prev, pager, next, jumper,->,total, sizes,"
      @size-change="getAttrList"
      @current-change="getAttrList"
    />
  </el-card>
</template>

<script lang="ts">
export default {
  name: "SpuList",
};
</script>

<script lang="ts" setup>
import { Delete, Edit, Plus, InfoFilled } from "@element-plus/icons-vue";
import { ref, watch } from "vue";
import { getSpuListApi ,delSpuUrlApi} from "@/api/product/spu";
import { useCategoryStore } from "@/stores/category";
import type { spuList } from "@/api/product/model/spuModel";
import { ElMessage } from "element-plus";
import type {spuFormDateType} from "@/api/product/model/spuModel";


const SpuList = ref<spuList>([]);
const currentPage = ref(1);
const pageSize = ref(3);
const total = ref(0);
//显示添加SPU
const emit = defineEmits(["setIsShow","setSpu","setIsShow"]);
const showSaveSpu = () => {
  emit("setIsShow", 2);
  //清空添加spu数据
  emit("setSpu", {
    spuName: "",
    tmId: undefined,
    description: "",
    spuImageList: [],
    spuSaleAttrList: [],
  });
};

//修改sku
const setSpuList = (row:spuFormDateType) => {
  emit("setIsShow", 2);
  emit("setSpu",{
    ...row,
    spuImageList: [],
    spuSaleAttrList: [],

  })
};

//添加sk
const UpdateSpu=(row:spuFormDateType)=>{
  emit("setIsShow", 3);
  emit("setSpu",row)
}

const categoryStore = useCategoryStore();
const getAttrList = () => {};
watch(
  () => categoryStore.category3Id,
  async () => {
    if (!categoryStore.category3Id) {
      SpuList.value = [];
      total.value = 0;
      currentPage.value = 1;
      pageSize.value = 3;
      return;
    }
    const res = await getSpuListApi({
      page: currentPage.value,
      limit: pageSize.value,
      category3Id: categoryStore.category3Id as number,
    });
    SpuList.value = res.records;
    total.value = res.total;
    ElMessage.success("获取SPU列表成功");
  },
  { immediate: true }
);
//删除
const delSpu=async(row:any)=>{
  const {id}=row
  // console.log(row)
 await delSpuUrlApi(id)
//  getSpuListApi({
//   page: currentPage.value,
//   limit: pageSize.value,
//   category3Id: categoryStore.category3Id as number,
//  }),

    ElMessage.success("删除SPU列表成功");
}
</script>

<style scoped>
.spu-table {
  margin: 10px 0;
}
</style>
